<template>
    <div class="app-container">
        <div style="text-align: right; padding-bottom:10px">
            <el-button type="primary" @click="add">添加</el-button>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="printer_list" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
            <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('类型')" prop="norms" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ trans_type(row.type) }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('用户名')" prop="store_name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.user }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('密钥')" prop="store_name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.ukey }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('编号')" prop="store_name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.sn }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('启用')" prop="store_name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.is_on == '1' ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        {{ $t('table.edit') }}
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                <el-form-item :label="$t('类型:')" prop="type" label-width="100px">
                    <el-select v-model="temp.type">
                        <el-option label="飞蛾打印机" value="feie">飞蛾打印机</el-option>
                        <el-option label="芯烨打印机" value="xinyue">芯烨打印机</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('用户名:')" prop="user" label-width="100px">
                    <el-input v-model="temp.user" type="text" />
                </el-form-item>
                <el-form-item :label="$t('密钥:')" prop="ukey" label-width="100px">
                    <el-input v-model="temp.ukey" type="text" />
                </el-form-item>
                <el-form-item :label="$t('编号:')" prop="sn" label-width="100px">
                    <el-input v-model="temp.sn" type="text" />
                </el-form-item>
                <el-form-item :label="$t('启用:')" prop="is_on" label-width="100px">
                    <el-switch v-model="temp.is_on" />
                </el-form-item>
                <!-- <el-form-item :label="$t('预订打印:')" prop="reserve_order_on" label-width="100px">
                    <el-switch v-model="temp.reserve_order_on" />
                </el-form-item>
                <el-form-item :label="$t('点单打印:')" prop="goods_order_on" label-width="100px">
                    <el-switch v-model="temp.goods_order_on" />
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    {{ $t("table.cancel") }}
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
                    {{ $t("table.confirm") }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ofStore as fetchPrinterList, create, deletePrinter, updatePrinter } from '@/platform/api/printer/printer'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
    components: { Pagination },
    data() {
        return {
            store_id: 0,
            printer_list: [],
            tableKey: 0,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑打印机',
                create: '添加打印机'
            },
            temp: {
                store_id: 0,
                type: '',
                user: '',
                ukey: '',
                sn: '',
                is_on: false,
                reserve_order_on: false,
                goods_order_on: false
            },
            rules: {
                type: [
                    { required: true, message: '请选择打印机类型', trigger: 'change' }
                ],
                user: [
                    { required: true, message: '请输入打印机用户名', trigger: 'change' }
                ],
                ukey: [
                    { required: true, message: '请输入打印机密钥', trigger: 'change' }
                ],
                sn: [
                    { required: true, message: '请输入编号', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        this.store_id = this.$route.query.id
        this.temp.store_id = this.store_id
        this.getList()
    },
    methods: {
        trans_type(type) {
            if (type === 'feie') {
                return '飞蛾打印机'
            } else if (type === 'xinyue') {
                return '芯烨打印机'
            } else {
                return '未知'
            }
        },
        getList() {
            this.listLoading = true
            fetchPrinterList({
                store_id: this.store_id
            }).then((res) => {
                this.printer_list = res.data.items
                this.listLoading = false
            })
        },
        add() {
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const data = this.temp
                    create(data).then((res) => {
                        this.getList()
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.dialogFormVisible = false
                    })
                }
            })
        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.temp.is_on = this.temp.is_on == '1'
            this.temp.reserve_order_on = this.temp.reserve_order_on == '1'
            this.temp.goods_order_on = this.temp.goods_order_on == '1'
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    updatePrinter(tempData).then(() => {
                        const index = this.printer_list.findIndex((v) => v.id === this.temp.id)
                        this.printer_list.splice(index, 1, this.temp)
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                }
            })
        },
        handleDelete(row, index) {
            deletePrinter({ id: row.id }).then((res) => {
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.printer_list.splice(index, 1)
            })
        },
        getSortClass(key) {
            const sort = this.listQuery.sort
            return sort === `+${key}` ? 'ascending' : 'descending'
        },
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        }
    }
}
</script>
